<script setup lang="ts">
import { onMounted } from 'vue';
import { useRouter } from 'vue-router'

const props = defineProps<{
    answers: any[]
    
}>()

const router = useRouter()

const formatDate = (dateString: string) => {
    const date = new Date(dateString)
    return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    })
}

const goToQuestionDetail = (questionId: number) => {
    const questionUrl = `/qa/${questionId}`;
    window.open(questionUrl, '_blank'); // 在新标签页中打开




}
</script>

<template>
    <div class="qa-section">
        <h2 class="qa-title">TA的问答</h2>
        <div class="qa-list">
            <div v-for="answer in answers" :key="answer.id" class="qa-item"
                @click="goToQuestionDetail(answer.question_id)">
                <div class="qa-content">
                    <span class="qa-text" v-html="answer.question_content"></span>
                    <span class="qa-arrow">›</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.qa-section {
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.qa-title {
    color: #333;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
}

.qa-list {
    display: flex;
    flex-direction: column;
}

.qa-item {
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}

.qa-item:last-child {
    border-bottom: none;
}

.qa-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qa-text {
    color: #666;
    font-size: 14px;
}

.qa-arrow {
    color: #999;
    font-size: 16px;
}

.qa-item:hover {
    background-color: #f9f9f9;
}

.qa-item:hover .qa-text {
    color: #00b96b;
}

.qa-item:hover .qa-arrow {
    color: #00b96b;
}
</style>